<template>
	<div id="components-layout-demo-top" v-loading="loading">
		<div class="h2">活动统计（学院）</div>
		<div id="components-form-demo-advanced-search">
			<a-form class="ant-advanced-search-form home-form" :form="form">
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item label="学期">
							<a-select :allowClear="true" v-decorator="['semesterID']" placeholder="全部" optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in SemesterList" :key="item.ID" :value="item.ID">{{ item.Name }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-button-group size="default" class="option">
							<a-button type="primary" @click="handleSearch">搜索</a-button>
							<!-- <a-button @click="handleReset">重置</a-button> -->
						</a-button-group>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<div style="overflow: hidden;">
			<div class="mainrigth">
				<div class="con con1" v-loading="loading">
					<h3 class="flex">
						<span class="titcon"><a-icon type="appstore" /></span>
						<div class="flex-1">{{ ActivityTypeList[0].Name }}</div>
						<div class="state">
							<div class="li" @click="stateFun(state.Key, 0)" :class="{ on: state.Key == ActivityTypeList[0].state }" v-for="(state, m) in stateList" :key="m">
								{{ state.Value }}
							</div>
						</div>
						<!-- <a-button class="more" @click="moreallactivity(ActivityTypeList[0].ID)"><a-icon type="right" /></a-button> -->
					</h3>
					<div class="activecon">
					 <ChartPie v-show="ActivityTypeList[0].data" id="chart_pie0" ref="chart_pie0" />
					 <div class="nothing" v-show="!ActivityTypeList[0].data">暂无数据</div>
					</div>
				</div>
				<div class="con con1" v-loading="loading">
					<h3 class="flex">
						<span class="titcon"><a-icon type="appstore" /></span>
						<div class="flex-1">{{ ActivityTypeList[1].Name }}</div>
						<div class="state">
							<div class="li" @click="stateFun(state.Key, 1)" :class="{ on: state.Key == ActivityTypeList[1].state }" v-for="(state, m) in stateList" :key="m">
								{{ state.Value }}
							</div>
						</div>
						<!-- <a-button class="more" @click="moreallactivity(ActivityTypeList[1].ID)"><a-icon type="right" /></a-button> -->
					</h3>
					<div class="activecon">
						<ChartPie id="chart_pie1" v-show="ActivityTypeList[1].data" ref="chart_pie1" />
						<div class="nothing" v-show="!ActivityTypeList[1].data">暂无数据</div>
					</div>
				</div>
				<div class="con con1" v-loading="loading">
					<h3 class="flex">
						<span class="titcon"><a-icon type="appstore" /></span>
						<div class="flex-1">{{ ActivityTypeList[2].Name }}</div>
						<div class="state">
							<div class="li" @click="stateFun(state.Key, 2)" :class="{ on: state.Key == ActivityTypeList[2].state }" v-for="(state, m) in stateList" :key="m">
								{{ state.Value }}
							</div>
						</div>
						<!-- <a-button class="more" @click="moreallactivity(ActivityTypeList[2].ID)"><a-icon type="right" /></a-button> -->
					</h3>
					<div class="activecon">
						<ChartPie id="chart_pie2" v-show="ActivityTypeList[2].data" ref="chart_pie2" />
						<div class="nothing" v-show="!ActivityTypeList[2].data">暂无数据</div>
					</div>
				</div>
				<div class="con con1" v-loading="loading">
					<h3 class="flex">
						<span class="titcon"><a-icon type="appstore" /></span>
						<div class="flex-1">{{ ActivityTypeList[3].Name }}</div>
						<div class="state">
							<div class="li" @click="stateFun(state.Key, 3)" :class="{ on: state.Key == ActivityTypeList[3].state }" v-for="(state, m) in stateList" :key="m">
								{{ state.Value }}
							</div>
						</div>
						<!-- <a-button class="more" @click="moreallactivity(ActivityTypeList[3].ID)"><a-icon type="right" /></a-button> -->
					</h3>
					<div class="activecon">
						<ChartPie id="chart_pie3" v-show="ActivityTypeList[3].data" ref="chart_pie3" />
						<div class="nothing" v-show="!ActivityTypeList[3].data">暂无数据</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import { UserGetActivityTypeListByParentIDCommon, DoGetNowSemesterCommon, DoGetActivityReportByTypeReport, DoGetSemesterListCommon } from '@/api/follow';
import ChartPie from '@/components/echarts/ChartPie';
import Cache from '@/utils/cache';
export default {
	components: {
		ChartPie
	},
	data() {
		return {
			msg: 0,
			form: this.$form.createForm(this, {
				name: 'advanced_search'
			}),
			loading: false,
			name: '统计',
			yData: [
				{
					value: 1048,
					name: '搜索引擎'
				},
				{
					value: 735,
					name: '直接访问'
				},
				{
					value: 580,
					name: '邮件营销'
				},
				{
					value: 484,
					name: '联盟广告'
				},
				{
					value: 300,
					name: '视频广告'
				}
			],
			ActivityTypeList: [
				{
					ID: '',
					Name: ''
				},
				{
					ID: '',
					Name: ''
				},
				{
					ID: '',
					Name: ''
				},
				{
					ID: '',
					Name: ''
				}
			],
			NowSemester: '',
			stateList: this.global.stateList,
			SemesterList: []
		};
	},
	mounted() {
		this.getOtherList();
		let that = this;
		setTimeout(function() {
			that.getList();
		}, 200);
	},
	methods: {
		handleSearch(e) {
			e.preventDefault();
			this.form.validateFields((error, values) => {
				this.ActivityTypeList =
					this.ActivityTypeList.map(item => {
								return { ...item, semesterID: values.semesterID };
						  })
				let list = [];
				list = this.ActivityTypeList;
				for (let i = 0, len = list.length; i < len; i++) {
					this.getPieList(i)
				}
			});
		},
		async getPieList(i){
			let data = {};
			data.activityTypeID = this.ActivityTypeList[i].ID;
			data.semesterID = this.ActivityTypeList[i].semesterID;
			data.state = this.ActivityTypeList[i].state;
			let res1 = await DoGetActivityReportByTypeReport(data);
			let arr = res1.data.data;
			let arr1 = [];
			arr.map((value, index, arry) => {
				if (value.Rate != 0) {
					arr1.push({
						name: value.DepartName,
						value: value.Rate
					});
				}
			});
			this.$refs['chart_pie' + i].initChart('统计', arr1);
		},
		async semesterChange(e, i) {
			this.ActivityTypeList[i].semesterID = e
			this.getPieList(i)
		},
		async stateFun(state, i) {
			this.ActivityTypeList[i].state = state;
			this.getPieList(i)
		},
		async getOtherList() {
			let res = await DoGetNowSemesterCommon();
			this.NowSemester = res.data.data.ID;
			let res1 = await DoGetSemesterListCommon();
			this.SemesterList = res1.data.data;
		},
		async getList() {
			let res = await UserGetActivityTypeListByParentIDCommon({ parentID: '' });
			this.ActivityTypeList =
				res.data.data.length > 0
					? res.data.data.map(item => {
							return { ...item, state: 1, semesterID: this.NowSemester };
					  })
					: [];
			let list = [];
			list = this.ActivityTypeList;
			for (let i = 0, len = list.length; i < len; i++) {
				this.getPieList(i)
			}
		},
		moreallactivity(item) {
			cosnole.log(item);
		}
	}
};
</script>

<style lang="less" scoped>
	.home-form /deep/.ant-form-item {
		display: flex;
		margin-bottom: 10px !important;
	}
	.home-form /deep/.ant-form-item-label {
		width: 80px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}
	.home-form /deep/.ant-form-item-control-wrapper {
		flex: 1;
	}
	.option {
		margin-top: 4px;
		margin-bottom: 20px;
		overflow: hidden;
		.ant-btn {
			font-size: 12px;
		}
	}
.flex {
	display: flex;
}
.flex-1 {
	flex: 1;
}

.mainrigth {
	width: 100%;
	border-radius: 10px;
	float: right;
	.con {
		padding: 10px;
		h3 {
			// font-size: 20px;
			font-weight: bold;
			color: #3b90f8;
			margin-bottom: 0px;
			.titcon {
				color: #b3b6c6;
				margin-right: 10px;
				i {
					// font-size:25px;
					vertical-align: middle;
				}
			}
			.state {
				font-size: 12px;
				font-weight: normal;
				line-height: 30px;
				display: flex;
				font-weight: 400;
				color: rgba(6, 8, 12, 0.6);
				.li {
					width: 70px;
					height: 26px;
					line-height: 26px;
					margin: 2px 4px;
					text-align: center;
					box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14);
					border-radius: 10px;
					&.on {
						background: #4577eb;
						color: #fff;
					}
				}
			}
			.join {
				height: 30px;
				border-radius: 4px;
				float: right;
				color: #3b90f8;
				background: #ededed;
				border: none;
				padding: 0 10px;
				margin-right: 10px;
			}
			.more {
				width: 30px;
				height: 30px;
				line-height: 30px;
				border-radius: 4px;
				float: right;
				color: #3b90f8;
				background: #ededed;
				border: none;
				.anticon {
					margin-left: -6px;
					line-height: 30px;
				}
			}
		}
	}
	.con2 {
		// border-top: 20px solid #efeff5;
	}
	.con3 {
		// border-top: 20px solid #efeff5;
	}
	.con4 {
		// border-top: 20px solid #efeff5;
	}
	.club {
		overflow: hidden;
	}
	.con1 {
		width: 48%;
		margin: 10px 1%;
		height: 450px;
		float: left;
		background: #fff;
	}
	.content-list {
		position: relative;
		height: 120px;
		width: 355px;
		display: flex;
		border-radius: 5px;
		float: left;
		padding: 20px;
		border: 1px solid #ededed;
		border-radius: 5px;
		margin: 10px 12px;
	}
	.cimg {
		width: 40px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		position: relative;
	}
	.cimg .picreplenish {
		width: 40px;
		height: 40px;
		background: #3b90f8;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		color: #fff;
	}
	.cimg .picreplenish span {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		padding: 0 5px;
	}
	.cimg .ant-avatar {
		width: 40px;
		height: 40px;
	}
	.c-number {
		position: absolute;
		top: -1px;
		left: -1px;
		width: 0;
		height: 0;
		border-top: 40px solid #3b90f8;
		border-right: 40px solid transparent;
	}
	.c-number .num {
		position: absolute;
		width: 20px;
		text-align: center;
		top: -40px;
		left: 0px;
		color: #fff;
	}
	.cdetail {
		margin-left: 10px;
		flex: 1;
		.titlemore {
			position: absolute;
			right: 10px;
			top: 10px;
			width: 24px;
			height: 24px;
			line-height: 24px;
			min-width: 24px;
			.anticon {
				margin-right: 0;
				line-height: 24px;
			}
		}
	}
	.cd-name {
		font-size: 16px;
		font-weight: 400;
		color: #383649;
		cursor: pointer;
	}
	.cd-list {
		font-size: 13px;
		font-weight: 400;
		color: #383649;
		line-height: 27px;
	}
	.cd-detail {
		color: #9da1ba;
	}
}
</style>
